<script setup>

</script>

<template>
  <div class="wrapper">
    <el-card class="box-card">
      <div class="title">
        <h1>Fly Template v2.0，基于 layui 的轻量级社区模版</h1>
      </div>
      <div class="author">
        <img src="@/assets/images/200.png" style="width: 75px;height: 75px;" alt="">

        <div class="detail-hits">
          <a class="user" href="">
            <span class="name">贤心</span>
            <span class="time">1分钟前发布</span>
          </a>
          <p>
            <span class="edit">
              <a href="#">编辑</a>
            </span>
            <span class="collect">
              <a href="#">收藏</a>
            </span>
          </p>
        </div>
      </div>

      <div class="detail-body" style="margin-bottom: 20px;">
        <p>
          该模版由 layui官方社区（
          <a href="http://fly.layui.com/" target="_blank">fly.layui.com</a>）倾情提供，只为表明我们对 layui
          执着的信念、以及对未来持续加强的承诺。该模版基于 layui 搭建而成，可作为简约型问答社区的页面支撑。
        </p>

        <p>更新日志：</p>
        <pre>
          # v2.0 2017-03-15
          * 采用 layui 1.0.9_rls 作为UI支撑
          * 所有页面更换为卡片式布局
          * 首页增加置顶板块
          * Detail页增加收藏按钮
          * 用户中心改造，增加左侧导航
          * 消息中心、登入、注册、找回密码等页面UI升级
        </pre>
        <p>
          码云：<a href="http://git.oschina.net/sentsin/fly" target="_blank">http://git.oschina.net/sentsin/fly</a>
          <br>GitHub：<a href="https://github.com/layui/fly" target="_blank">https://github.com/layui/fly</a>
        </p>

      </div>
    </el-card>
  </div>
</template>

<style scoped lang="css">
.wrapper {
  height: 100%;
  width: 1200px;
  /*居中*/
  margin: 0 auto;
}

.box-card {
  margin-top: 20px;
}

.author {
  display: flex;
  line-height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #f3f1f1;
  background-color: #f3f1f1;
}

.author img {
  margin-right: 25px;
  margin-top: 15px;
  margin-left: 15px;
}

.author .detail-hits p .edit a {
  border: 1px solid #5e8d2f;
  padding: 5px;
  margin-right: 20px;
  background-color: green;
  color: #ffffff;
}

.author .detail-hits p .collect a {
  border: 1px solid #5e8d2f;
  padding: 5px;
  background-color: green;
  color: #ffffff;
}

.author .detail-hits .user .name {
  padding-right: 30px;
  color: #5e8d2f;
  font-weight: 700;
  font-size: 20px;
}

.author .detail-hits .user .time {
  color: #b4b4b2;
}
</style>
